<template>
  <div class="nav">
    <ul v-for="(v, i) in navList" :key="i">
      <b>{{ v.name }}</b>
      <li
        :class="{
          active:
            $store.state.colorList.includes(vv) ||
            $store.state.sizeList.includes(vv),
        }"
        @click="classActive(i, vv)"
        v-for="(vv, ii) in v.values"
        :key="ii"
      >
        {{ vv }}
      </li>
    </ul>

    <button @click="$store.commit('remove')">重置</button>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
  props: { navList: Object },
  setup(props, { emit }) {
    let store = useStore();
    //  每次点击传值
    function classActive(index, val) {
      console.log(index, val);
      if (index == 0) {
        store.commit("pushColor", val);
      } else {
        store.commit("sizeList", val);
      }
    }
    return { classActive };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.active {
  background-color: red;
}
.nav {
  width: 1280px;
  margin: auto;
  ul {
    width: 1280px;
    height: 40px;
    border-bottom: 2px solid #000;
    margin: auto;
    display: flex;
    align-items: center;
    li {
      list-style: none;
      height: 20px;
      border: 1px solid rgb(236, 56, 56);
      margin: 0 20px;
      padding: 0 10px;
      line-height: 20px;
      border-radius: 5px;
    }
  }
}
</style>
